

<div style="margin: 60px;">
  <h1 style="text-align: center">{{title}}</h1>
  <HR width="80%" color=#987cb9 SIZE=3>

  <!--<input #myInput type="number" value="3"/>-->
  <!--<button (click)="setSelection(myTextArea, myInput.value, myInput.value)">Set Caret Position</button>-->

  <!--<textarea rows="4" #myTextArea cols="40" >Sample Text Here</textarea>-->

  <div style="margin: 10px;">
    <h3>Confirm对话框例子</h3>
    <button class="btn btn-default" (click)="confirm();">Confirm测试</button>
  </div>


  <div class="modal-demo" style="margin: 10px;">
    <h3 >模态窗口 <re-badge [text]="88"></re-badge>例子</h3>
    <button class="btn btn-default" (click)="openModal();">测试模态窗口!</button>
  </div>

  <div class="modal-demo" style="margin: 10px;">
    <h3 >分页 <re-badge [text]="88"></re-badge>例子</h3>
    <section>
      <h4>Chinese text:</h4>
      <re-pagination [total]="pager.total" [pageSize]="pager.pageSize" [(pageIndex)]="pager.pageIndex"
                     (pageIndexChange)="pageChange($event)" [maxItems]="10"
                     firstLink="首页" lastLink="尾页" preLink="前一页" nextLink="下一页">
      </re-pagination>
    </section>
  </div>



  <div class="modal-demo" style="margin: 10px;">
    <h3 >DatePicker 例子</h3>
    <div class="date-picker-demo">
      <section>
        <h4>Date picker popup</h4>
        <re-date-picker-popup [(ngModel)]="selectedDate1" [showTimePicker]="true">
        </re-date-picker-popup>
        <pre>{{(selectedDate1 | date : 'yyyy-MM-dd HH:mm') || 'No date select!'}}</pre>
      </section>

      <section>
        <h4>Date picker with input</h4>
        <form class="form-horizontal">
          <div class="form-group">
            <div class="input-group">
              <input class="form-control" placeholder="yyyy-MM-dd"
                     name="dp" [(ngModel)]="selectedDate2" reDatePicker #datePicker1="datePicker" (click)="datePicker1.toggle($event)">
              <div class="input-group-addon" (click)="datePicker1.toggle($event)">
                <i class="glyphicon glyphicon-calendar"></i>
              </div>
            </div>
          </div>
          <pre>{{(selectedDate2 | date : 'yyyy-MM-dd HH:mm') || 'No date select!'}}</pre>
        </form>
      </section>

      <section>
        <h4>Date picker with input with time picker </h4>
        <form class="form-horizontal">
          <div class="form-group">
            <label>Date format</label>
            <select name="dateFormat" class="form-control" [(ngModel)]="dateFormat">
              <option *ngFor="let item of dateFormatOptions" [ngValue]="item">{{item}}</option>
            </select>
          </div>
          <div class="form-group">
            <div class="input-group">
              <input class="form-control" [placeholder]="dateFormat" [dateFormat]="dateFormat"
                     name="dp" [(ngModel)]="selectedDate3" [showTimePicker]="true" reDatePicker #datePicker2="datePicker"
                     placement="top-left" [minDate]="'2016-12-30'" [maxDate]="'2017-02-27'" (click)="datePicker2.toggle($event)">
              <div class="input-group-addon" (click)="datePicker2.toggle($event)">
                <i class="glyphicon glyphicon-calendar"></i>
              </div>
            </div>
          </div>
          <pre>{{selectedDate3 | date : 'yyyy-MM-dd HH:mm'}}</pre>
        </form>
      </section>
    </div>
  </div>

</div>
